<template>
  <!-- 选择主机弹框的子组件 -->
  <div class="tablePannel">
    <div class="head">{{ type == 'all' ? '所有' : '选中' }}主机</div>

    <div class="body">
      <!-- suffix-icon="el-icon-search" -->
      <el-input v-model="queryForm.query.name" :page="queryForm.page"
                placeholder="输入主机名"></el-input>
      <!-- @keyup.enter.native="init()" -->
      <div class="searchhead">
        <el-input v-model="queryForm.query.ip" :page="queryForm.page"
                  placeholder="输入主机IP"></el-input>

        <el-button type='hawkSearch' @click='init()'>搜索</el-button>
      </div>

      <!-- :key="type +'table'" -->
      <hawk-table v-model="multipleSelection" :table-data="tableData"
                  :height="458" :options="[

          { key: 'host', label: '主机名称' },
          { key: 'ip', label: 'IP' }

        ]" style="height: 520px;overflow-y: auto;">

        <!-- <template #host="{ row }" >
          <span>{{ row.host?row.host:row.name  }}</span>
        </template> -->

      </hawk-table>

      <div style="text-align:center;" v-if="type == 'all'">
        <el-pagination small :key="type" layout="prev, pager, next"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" :total="total">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script type="text/javascript">
/*
 * @author 创建者
 * @description 文件描述
 * @api 后台接口地址
 * @since 文件生成时间
 * @update 代码更新时间
 * @modifier 修改人
 * @bug bug名称或无
 * @version 版本号 例:v1.0.0
 */

import { getHost as hostList } from '@/api/assets/list/host'
import { doAdd, doDelete } from "@/api/monitor/config/business/chooseHosts"

import { getAllCompute as getAllHosts } from '@/api/assets/list/host'

export default {
  props: {
    type: {
      type: String,
      default: 'all'
    },
  },

  data () {
    return {
      multipleSelection: [],
      queryForm: {
        query: {
          host: '',
          businessId: 0,
          ip: '',
          name: ''
        },
        page: {
          current: 1,
          size: 10
        }
      },
      form: {
        businessId: '',
        hostIds: [],
      },
      tableData: [],
      total: 0,

      isAllReady: false,

      willSubItems: '',
      initFlag: false
    }
  },


  methods: {
    allSideReady () {
      this.isAllReady = true;
    },
    // empty () {
    //   this.multipleSelection = []
    // },
    // 更新当前系统业务的主机列表
    async updateBunisessHosts () {
      if (this.type == 'all') {
        return
      }
      this.form.hostIds = [];
      this.tableData.forEach(item => {
        this.form.hostIds.push(item.hostid)
      })

      console.log(this.form)

      // if (this.form.hostIds.length == 0) {
      //   this.form.hostIds = null
      // }

      let ret = await doAdd(this.form);

      console.log(ret);
      if (ret.code == 20000) {
        return 'ok'
      }

    },
    firstSub (item) {

      this.willSubItems = item

    },

    async init (val) {
      if (val) {

        this.queryForm.query.businessId = val
        this.form.businessId = val;
      }

      if (this.type == 'all') {
        // 所有主机
        let ret = await getAllHosts(this.queryForm);
        console.log(JSON.stringify(ret), '---------所有主机');
        console.log(ret, '---------所有主机');

        this.tableData = ret.data.records
        console.log(this.tableData, '-----------------');

        this.multipleSelection = []

        // if (this.willSubItems.length > 0) {
        //   this.$eventHub.$emit("subHostItem", "all", this.willSubItems)
        // }


      } else {

        // 已经选中的主机
        let res1 = await hostList(this.queryForm);
        if(!res1){
          // 没有权限
          this.$emit('closeChooseHostDlg')
        }

        console.log(JSON.stringify(res1), '---已选主机');

        this.total = res1.data.total
        this.tableData = res1.data.records
        this.multipleSelection = []

        this.$eventHub.$emit("subHostItem", "all", this.tableData)

        this.$eventHub.$emit("firstSub", this.tableData)

        //  this.autoFlag = setInterval(() => {
        //     if(this.isAllReady){
        //       console.log('----已有主机，在等  all 主机，完成-------');
        //       this.$eventHub.$emit("subHostItem", "all", this.tableData)
        //       clearInterval(this.autoFlag)
        //     }
        //   }, 200);

        // setTimeout(() => {
        //   this.$eventHub.$emit("subHostItem", "all", this.tableData)

        // }, 1500);


      }
    },
    // 为当前业务系统添加主机
    // async addHost () {
    //   this.form.hostIds = [];
    //   this.multipleSelection.forEach(item => {
    //     this.form.hostIds.push(item.hostid)
    //   })
    //   console.log(this.form)
    //   let ret = await doAdd(this.form);
    //   console.log(ret);
    //   if (ret.code == 20000) {

    //     this.multipleSelection = [];
    //     // 刷新页面
    //     this.$forceUpdate();
    //   }
    // },

    // 从左移到右
    async addHost () {
      console.log(this.multipleSelection);
      this.$eventHub.$emit("subHostItem", "all", this.multipleSelection)
      this.$eventHub.$emit("addHostItem", "choosed", this.multipleSelection)

      // this.$nextTick(() => {
      // this.multipleSelection = []
      // })
    },

    // async delHost () {
    //   this.form.hostIds = [];
    //   this.multipleSelection.forEach(item => {
    //     this.form.hostIds.push(item.hostid)
    //   })
    //   await doDelete(this.form.hostIds);
    //   this.multipleSelection = [];
    //   this.$forceUpdate();
    //   console.log('1');
    // },

    async delHost () {
      // 从右向左移动
      this.$eventHub.$emit("addHostItem", "all", this.multipleSelection)
      this.$eventHub.$emit("subHostItem", "choosed", this.multipleSelection)

    },

    handleSizeChange (val) {
      this.queryForm.page.size = val
      this.init()
    },
    handleCurrentChange (val) {
      this.queryForm.page.current = val
      this.init()
    },

    // 减少主机条目
    subHostItem (flat, items) {
      console.log(flat);
      console.log(items);



      if (this.type == flat) {

        items.forEach(item => {

          let index = this.tableData.findIndex(el => {
            return el.hostid == item.hostid
          })

          if (index !== -1) {
            this.tableData.splice(index, 1)
          }

        })
        this.$nextTick(() => {
          this.multipleSelection = []
        })
      }
    },
    // 添加条目
    addHostItem (flat, items) {
      // console.log(flat);
      // console.log(items);
      if (this.type == flat) {
        this.tableData.push(...items)
        this.multipleSelection = []
      }
    }


    // handleSelectionChange(val) {
    //   this.multipleSelection = val
    // },
  },
  created () {
    this.$eventHub.$on("subHostItem", this.subHostItem)
    this.$eventHub.$on("addHostItem", this.addHostItem)

    if (this.type == 'all') {
      this.$eventHub.$on("firstSub", this.firstSub)
    }
  }

}
</script>

<style lang="scss" scoped>
.tablePannel {
  .head {
    height: 40px;
    background: rgb(226, 225, 225);
    line-height: 40px;
    color: #606266;
    font-size: 14px;
    text-align: right;
    padding: 0 15px;
  }
  .body {
    padding: 15px;
    .searchhead {
      margin-top: 5px;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
